<template>
  <div class="procurement_wrapper">
    <div class="breadcrumb">
      <router-link :to="{name: 'memberCenter'}" class="bread_a">个人中心</router-link> <i class="el-icon-arrow-right"></i>
      可用余额
    </div>
    <div class="procurement_box">
      <div class="procurement_money">
        <p class="date" >可用余额</p>
        <!-- <span class="tit">可用余额</span> -->
        <h3 class="money">¥{{balanceAmount | floatPrices}} </h3>
        <span class="tag">累计使用余额：{{totalBalanceAmount | floatPrices}}</span>
      </div>
      <div class="line" ></div>
      <div class="procuremen_table" >
        <h1 class="title">余额明细</h1>
        <div class="no-content " v-if="!acceptList.length">暂无数据</div>
        <el-table :data="acceptList"  style="width: 100%" header-row-class-name="table_thead_style" v-else>
          <el-table-column
            style="padding-left: 50px;"
            label="时间"
            prop="createTime">
          </el-table-column>
          <el-table-column label="明细" prop="changeReason">
          </el-table-column>
          <el-table-column
            label="余额"
            slot-scope="scope">
            {{ scope.row.amount | amountFilter}}
          </el-table-column>
        </el-table>
         <el-row v-if="pageObj.totalRecords && pageObj.totalRecords > 5" style="width:100%;">
          <el-pagination layout="total, prev, pager, next, ->" :current-page.sync="page" :page-size="5"
            :total="pageObj.totalRecords" @current-change="handlePage" class="page_pos"></el-pagination>
        </el-row>
      </div>
      <div class="line"></div>
      <div class="ad_box_block">
        <div class="qrcode">
          <img src="../../../images/qrcode.jpg" height="126" width="126" />
        </div>
        <h2 class="text_big">扫码关注微信公众号</h2>
        <p class="text_small">百万优惠 无限礼包 随意拿</p>
      </div>
    </div>
  </div>
</template>

<script>
import {Breadcrumb, BreadcrumbItem, Table, TableColumn, Row, Pagination} from 'element-ui'
import {mapState, mapActions} from 'vuex'
import {getMyBalancePayment, getMyAllUsedBalanceAmount} from '@/service/get-data'
export default {
  components: {
    elBreadcrumb: Breadcrumb,
    elBreadcrumbItem: BreadcrumbItem,
    elTable: Table,
    elTableColumn: TableColumn,
    elRow: Row,
    elPagination: Pagination
  },
  data () {
    return {
      levelWidthArr: [], // 等级百分比
      barWidth: '', // 进度条宽度
      procurementList: [],
      page: 1,
      number: 5,
      acceptList: [
      ],
      pageObj: {
      },
      totalBalanceAmount: 0
    }
  },
  computed: {
    ...mapState({
      levelInfo: state => state.levelInfoObj,
      balanceAmount: state => state.user.balanceAmount
    })
  },
  methods: {
    ...mapActions(['getUserLevelInfo']),
    async fetchMyBalancePayment () {
      let res = await getMyBalancePayment(this.page, this.number)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.acceptList = res.data.data.list
        this.pageObj = res.data.data.page
      } else {
        this.$message.error(res.data.resultMsg)
      }
    },
    async fetchMyAllUsedBalanceAmount () {
      let res = await getMyAllUsedBalanceAmount()
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.totalBalanceAmount = res.data.data
      } else {
        this.$message.error(res.data.resultMsg)
      }
    },
    // 规格页码选择
    handlePage (currentPage) {
      this.page = currentPage
      this.fetchMyBalancePayment()
    }
  },
  mounted () {
    this.fetchMyBalancePayment()
    this.fetchMyAllUsedBalanceAmount()
  },
  filters: {
    amountFilter (amount) {
      if (!amount) return
      let result = ''
      let tagReg = /\+-/i
      tagReg.test(amount) ? result = `-￥${amount.substr(2)}` : result = `+￥${amount.substr(1)}`
      return result
    }
  }
}
</script>

<style lang="scss" scoped>
  .bread_nav{
    margin: 15px 0;
  }
  .procurement_box{
    background: #ffffff;
  }
  .procurement{
    &_money{
      padding: 40px 0 40px;
      text-align: center;
      box-sizing: border-box;
      .date{
        @include fontbase(#3A3A3A, 14px, 22px);
        margin-bottom: 5px;
      }
      .tit{
        display: inline-block;
        @include fontbase(#666666, 18px, 25px);
        margin-bottom: 40px;
      }
      .money{
        @include fontbase(#333333, 40px, 56px);
        margin-bottom: 10px;
      }
      .tag{
        display: inline-block;
        padding: 10px 24px;
        background: #EDEDED;
        @include fontbase(#3A3A3A, 14px, 20px);
      }
    }
  }

  .procuremen_table{
    margin: 0 -52px 45px;
    .title{
      @include fontbase(#333333, 18px, 25px);
      padding: 37px 0 20px 50px;
    }
  }
  .page_pos{
    text-align: right;
    margin-top: 20px;
  }
  
</style>
<style>
  .el-table__row .aaa, .table_thead_style .bbb{
    padding-left: 50px;
  }
</style>

